import { IconProps } from '../../icon.types'

type Props = Omit<IconProps, 'name'>

const SettingsIcon: React.FC<Props> = ({
  color = 'white',
  width = '25',
  height = '25',
  onClick,
}) => {
  return (
    <svg
      width={width}
      height={height}
      viewBox="0 0 21 21"
      fill={color}
      xmlns="http://www.w3.org/2000/svg"
      onClick={onClick}
    >
      <path
        d="M9.01239 0.710693C8.53339 0.710693 8.12393 1.04929 8.03193 1.51929L7.69794 3.23413C6.87718 3.54449 6.11826 3.9781 5.45185 4.52515L3.80732 3.95874C3.35432 3.80274 2.85591 3.99005 2.61591 4.40405L1.1081 7.01733C0.869098 7.43233 0.956082 7.95919 1.31708 8.27319L2.63544 9.41968C2.56688 9.84103 2.52216 10.27 2.52216 10.7107C2.52216 11.1514 2.56688 11.5804 2.63544 12.0017L1.31708 13.1482C0.956082 13.4622 0.869098 13.9891 1.1081 14.4041L2.61591 17.0173C2.85491 17.4323 3.35432 17.6196 3.80732 17.4646L5.45185 16.8982C6.11804 17.4449 6.87755 17.877 7.69794 18.1873L8.03193 19.9021C8.12393 20.3721 8.53339 20.7107 9.01239 20.7107H12.0319C12.5109 20.7107 12.9204 20.3721 13.0124 19.9021L13.3464 18.1873C14.1671 17.8769 14.9261 17.4433 15.5925 16.8962L17.237 17.4626C17.69 17.6186 18.1884 17.4323 18.4284 17.0173L19.9362 14.4021C20.1752 13.9871 20.0882 13.4622 19.7272 13.1482L18.4089 12.0017C18.4774 11.5804 18.5222 11.1514 18.5222 10.7107C18.5222 10.27 18.4774 9.84103 18.4089 9.41968L19.7272 8.27319C20.0882 7.95919 20.1752 7.43233 19.9362 7.01733L18.4284 4.40405C18.1894 3.98905 17.69 3.80179 17.237 3.95679L15.5925 4.52319C14.9263 3.97649 14.1668 3.54435 13.3464 3.23413L13.0124 1.51929C12.9204 1.04929 12.5109 0.710693 12.0319 0.710693H9.01239ZM10.5222 6.71069C12.7312 6.71069 14.5222 8.50169 14.5222 10.7107C14.5222 12.9197 12.7312 14.7107 10.5222 14.7107C8.31316 14.7107 6.52216 12.9197 6.52216 10.7107C6.52216 8.50169 8.31316 6.71069 10.5222 6.71069Z"
        fill={color}
      />
    </svg>
  )
}

export default SettingsIcon
